<template>
	<div class="layout">
		<div class="appealListDiv">
			<div style="display: flex; justify-content: space-between; margin-top: 20px">
				<Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <Buttons @goBack="goBack()" :buttons="buttons"></Buttons>
			</div>
			<SearchFrame @search="searchResult" tip="职业技能" />
			<div class="selectBar2">
        <div>
          <el-select
            v-model.trim="education"
            placeholder="学历要求"
            size="small"
            style="width: 126px"
            @change="changeEducation"
          >
            <el-option
              v-for="item in educationOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </div>
        <div class="clearBtn" @click="clearSelect">清空筛选条件</div>
      </div>
      <ContainerTitle text="求职诉求列表" :more="false" class="containerTitle"></ContainerTitle>
			<div v-if="helpAppealList.length > 0" class="humanListDiv">
				<HumanFrame
          v-for="(human, index) in helpAppealList"
          :human="human"
          :key="human.id"
					:type="1"
          :style="index == 9 ? 'border-bottom: 0' : ''"/>
      </div>
			<div class="empty" v-else>
        <PublicImage :src="require('@/assets/image/empty.png')" :originalSize="true"></PublicImage>
        <p>暂无内容</p>
			</div>
			<div v-if="helpAppealList.length > 0" id="policyPagination">
				<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageNum" background
						:page-sizes="[10, 20, 30, 50]"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import Breadcrumb from '@/components/breadcrumb'
	import SearchFrame from "./components/searchFrame";
	import HumanFrame from "./components/humanFrame";
	//api
	import {request} from '@/utils/request.js'
	import config from '@/utils/config.js'

	export default {
		name: "helpAppealList",
		meta:{
			name: '求职诉求列表'
		},
		components: { Breadcrumb, HumanFrame, SearchFrame},
		data() {
			return {
        buttons:[{text:"返回",type:"normal",size:"s",method:"goBack"}],
				crumbs: [
					{label: '人才服务',value: 'help'}, 
					{label: '求职诉求列表',value: '',choose: true}
				],
				pageNum: 1, //当前页
				pageSize: 10, //每页条数
				total: null, //总条数
				helpAppealList: [],
				educationOptions: [],
				education: '',
				skill: ''
			}
		},
		mounted(){
      this.getHelpAppealList();
      this.getEducationSelectList();
		},
		// activated(){
		// 	this.pageNum = 1
		// 	this.$refs.headerBars.setCompanyInfo();
		// 	this.$refs.headerBars.isLogin();
		// 	this.getHelpAppealList();
		// 	this.getEducationSelectList();
		// },
		methods: {
			// 搜索结果
			searchResult(d) {
				this.skill = d
				this.getHelpAppealList()
			},
			// 获取学历要求下拉列表
      async getEducationSelectList() {
        const { code, msg, data } = await getEducationSelectList();
        if (code != "200") return this.$message.warning(msg);
        this.educationOptions = data.worker_education;
      },
			// 下拉改变学历
			changeEducation(val) {
				this.education = val;
				this.getHelpAppealList()
			},
			// 清空筛选条件 - 学历不限置空
			clearSelect() {
				this.education = "";
				this.getHelpAppealList()
			},
			// 获取劳务诉求列表
			async getHelpAppealList(){
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					education: this.education != 0 ? this.education : "",
					skill: this.skill
				}
				const { code, msg, rows, total} = await request(this, config.api.laborDemandList, data, 'GET');
				if(code != '200') return this.$message.warning(msg);
				this.helpAppealList = rows;
				this.total = total;
			},
			// 改变每页大小
			handleSizeChange(e){
				this.pageSize = e;
				this.getHelpAppealList();
			},
			// 改变当前页
			handleCurrentChange(e){
				this.pageNum = e;
				this.getHelpAppealList();
			},
			/**
			 * 跳转到务工需求帮扶详情
			 * @param appeal 务工需求对象
			 */
			toAppealDetail(appeal) {
				this.$router.push({path: 'helpAppealDetail', query: {id: appeal.id}})
			},
			/**
			 * 返回上一页
			 */
			goBack() {
				// this.$router.back();
				this.$router.replace({ path: '/help' });
			}
		}
	}
</script>

<style lang="scss" scoped>
.empty{
	text-align: center;
	img{
		width: 312px;
    height: 185px;
		object-fit: cover;
	}
	p{
		font-size: 14px;
    color: #666;
	}
}
.selectBar2 {
  width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .clearBtn {
    width: 120px;
    height: 32px;
    line-height: 32px;
    background-color: #ffffff;
    // padding: 5px 15px;
    font-size: 13px;
    border-radius: 3px;
    transition: all 0.2s ease 0s;
    border: 1px solid #eeeeee;
    color: #606266;
    margin-left: 20px;
  }
  .clearBtn:hover {
    cursor: pointer;
    box-shadow: 0px 0px 5px #eeeeee;
  }
}
.humanListDiv {
  border: 1px solid #eeeeee;
  margin-bottom: 15px;
}
	.layout {
		min-height: 100vh;
		position: relative;
		padding-bottom: 170px;
		box-sizing: border-box;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.appealListDiv {
		width: 1200px;
		margin: 0 auto;
	}

	.appealListDiv .backBtn {
		border: 1px solid #eeeeee;
		white-space: nowrap;
		font-size: 12px;
		height: 30px;
		width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
	}

	.appealListDiv .backBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 5px #EEEEEE;
	}

	.appealListDiv .title {
		font-size: 20px;
		text-align: left;
		font-weight: bold;
		border-bottom: 2px solid #045db9;
		padding: 10px;
		padding-top: 20px;
		color: #045db9;
		margin-top: 10px;
  	margin-bottom: 20px;
	}

	.appealListDiv .tableDiv {
		margin: 18px 0;;
		border: 1px solid #eeeeee;
		color: #666666;
		font-size: 12px;
	}

	.appealListDiv .tableDiv .rowDiv {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
	}

	.appealListDiv .tableDiv .headDiv {
		background-color: #f4f4f4;
	}

	.appealListDiv .tableDiv .rowDiv .cellDiv {
		padding: 10px;
		border-right: 1px solid #eeeeee;
		text-align: left;
		transition: all 0.2s ease 0s;
		word-wrap: break-word;
		box-sizing: border-box;
	}

	.appealListDiv .tableDiv .rowDiv:hover .cellDiv {
		background-color: #fcfcfc;
	}

	.appealListDiv .tableDiv .rowDiv .appealName:hover {
		text-decoration: underline;
		color: #045db9;
		cursor: pointer;
	}

	#policyPagination {
		text-align: right;
		margin-bottom: 30px;
	}
</style>
